<template>
	<view class="page">
		<view class="notice">
			<u-icon name="info-circle-fill" color="#AC9146" size="30" top="3" />
			<text>准确填写个人信息，可享受每份代驾订单人身意外险</text>
		</view>
		<view class="credentials-container">
			<view class="credentials">
				<image :src="cardBackground0" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">身份证正面</text>
					<ocr-navigator @onSuccess="scanIdcardFront" certificateType="idCard" :opposite="false">
						<button class="camera"></button>
					</ocr-navigator>
				</view>
			</view>
			<view class="credentials">
				<image :src="cardBackground1" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">身份证背面</text>
					<ocr-navigator @onSuccess="scanIdcardBack" certificateType="idCard" :opposite="true">
						<button class="camera"></button>
					</ocr-navigator>
				</view>
			</view>
			<view class="credentials">
				<image :src="cardBackground2" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">手持身份证</text>
					<button class="camera" @tap="takePhoto('idcardHolding')"></button>
				</view>
			</view>
			<view class="credentials">
				<image :src="cardBackground3" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">驾驶证正面</text>
					<ocr-navigator @onSuccess="scanDrcardFront" certificateType="driverslicense">
						<button class="camera"></button>
					</ocr-navigator>
				</view>
			</view>
			<view class="credentials">
				<image :src="cardBackground4" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">驾驶证背面</text>
					<!-- <ocr-navigator @onSuccess="scanDrcardBack" certificateType="menu">
						<button class="camera"></button>
					</ocr-navigator> -->
					<button class="camera" @tap="takePhoto('drcardBack')"></button>
				</view>
			</view>
			<view class="credentials">
				<image :src="cardBackground5" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">手持驾驶证</text>
					<button class="camera" @tap="takePhoto('drcardHolding')"></button>
				</view>
			</view>
		</view>

		<view class="title">个人信息</view>
		<view class="list">
			<u-cell-group border="false">
				<u-cell-item title="真实姓名" :value="idcard.name" :value-style="style" :arrow="false" />
				<u-cell-item title="性别" :value="idcard.sex" :value-style="style" :arrow="false" />
				<u-cell-item title="生日" :value="idcard.birthday" :value-style="style" :arrow="false" />
				<u-cell-item title="身份证号" :value="idcard.idNumber" :value-style="style" :arrow="false" />
				<u-cell-item title="身份证地址" :value="idcard.idcardAddress.substr(0,10)+'...'" :value-style="style"  />
				<u-cell-item title="身份证有效期" :value="idcard.idcardExpire" :value-style="style" :arrow="false" />
			</u-cell-group>
		</view>
		<view class="title">联系方式</view>
		<view class="list">
			<u-cell-group border="false">
				<u-cell-item title="手机号码" :value="contact.phone" :value-style="style"  @click="enterContent('手机号码', 'phone')" />
				<u-cell-item title="电子信箱" :value="contact.email" :value-style="style" @click="enterContent('电子信箱', 'email')" />
				<u-cell-item
					title="收信地址"
					:value="contact.mailAddress  "
					:value-style="style"
					@click="enterContent('收信地址', 'mailAddress')"
				/>
				<u-cell-item
					title="紧急联系人"
					:value="contact.contactName"
					:value-style="style"
					@click="enterContent('紧急联系人', 'contactName')"
				/>
				<u-cell-item
					title="紧急联系人电话"
					:value="contact.contactPhone"
					:value-style="style"
					@click="enterContent('紧急联系人电话', 'contactPhone')"
				/>
			</u-cell-group>
		</view>
		<view class="title">驾驶证</view>
		<view class="list">
			<u-cell-group border="false">
				<u-cell-item title="驾驶证类型" :value="drcard.carClass" :value-style="style" :arrow="false" />
				<u-cell-item title="驾驶证有效期" :value="drcard.validTo" :value-style="style" :arrow="false" />
				<u-cell-item title="初次领证日期" :value="drcard.issueDate" :value-style="style" :arrow="false" />
			</u-cell-group>
		</view>

		<!-- <button class="btn" @tap="save" :disabled="realAuthStatus == 3">保存信息</button> -->
		<button class="btn" :disabled="realAuthStatus == 0 || realAuthStatus == 1" @tap="save" >
			<text v-if="realAuthStatus == 0">审核中</text>
			<text v-else-if="realAuthStatus == 1">已通过</text>
			<text v-else>提交实名</text>
		</button>
		<view class="remark">您每次提交实名信息之后，都需要工作人员严格审查，请等候1~3天，这期间您将无法接单，特此声明！</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
let dayjs = require('dayjs');
export default {
	data() {
		return {
      id:"",
			realAuthStatus:null,
			mode: 'fill',
			style: {
				color: '#FF9900'
			},
			//证件背景：用作小程序预览
			// cardBackground: [
			// 	'../static/filling/credentials-bg.jpg',
			// 	'../static/filling/credentials-bg.jpg',
			// 	'../static/filling/credentials-bg.jpg',
			// 	'../static/filling/credentials-bg.jpg',
			// 	'../static/filling/credentials-bg.jpg',
			// 	'../static/filling/credentials-bg.jpg'
			// ],
      cardBackground0:'../static/filling/credentials-bg.jpg',
      cardBackground1:'../static/filling/credentials-bg.jpg',
      cardBackground2:'../static/filling/credentials-bg.jpg',
      cardBackground3:'../static/filling/credentials-bg.jpg',
      cardBackground4:'../static/filling/credentials-bg.jpg',
      cardBackground5:'../static/filling/credentials-bg.jpg',
			idcard: {
				//身份证ID
				idNumber: '',
				name: '',
				sex: '',
				idcardAddress: '',
				//地址
				shortAddress: '',
				//生日
				birthday: '',
				//过期时间
				idcardExpire: '',
				//身份证正面:云地址
				idcardFront: '',
				//身份证背面:云地址
				idcardBack: '',
				//手持身份证:云地址
				idcardHolding: ''
			},
			//联系人
			contact: {
				//手机号
				phone: '18244229577',
				//电子邮件
				email: '18244229577@qq.com',
				//短邮箱
				shortEmail: '18244229577@qq.com',
				//收信地址
				mailAddress: '广州市xx区xx乡镇',
				//短地址
				shortMailAddress: '广州市xx区xx乡镇',
				//联系人
				contactName: '阿崔',
				//联系电话
				contactPhone: '18244229577'
			},
			//驾驶证
			drcard: {
				//颁发时间
				drcardIssueDate: '',
				//驾驶证类型
				carClass: '',
				//驾驶证过期时间
				drcardExpire: '',
				//驾驶证正面:云地址
				drcardFront: '',
				//驾驶证背面:云地址
				drcardBack: '',
				//手持驾驶证:云地址
				drcardHolding: '',
        validTo: '',
        issueDate: ''
			},
			//记录所有云文件地址，用作删除
			allCosImg: [],
			//保存有效的文件地址
			currentCosImg: [],
			realAuth: uni.getStorageSync('realAuth')
		};
	},
	methods: {
		//提交认证材料
		save(){
			let _this = this;
      let param = {
        name: _this.idcard.name,
        gender: _this.idcard.sex,
        idNumber: _this.idcard.idNumber,

        //生日
        birthday: dayjs(_this.idcard.birthday).format("YYYY-MM-DD"),

        idcardAddress: _this.idcard.idcardAddress,
        //过期时间
        idcardExpire: dayjs(_this.idcard.idcardExpire.split("-")[1]).format("YYYY-MM-DD"),
        //身份证正面:云地址
        idcardFront: _this.idcard.idcardFront,
        //身份证背面:云地址
        idcardBack: _this.idcard.idcardBack,
        //手持身份证:云地址
        idcardHolding: _this.idcard.idcardHolding,
//----------------驾驶证-------------
        //驾驶证类型
        carClass: _this.drcard.carClass,
        //驾驶证过期时间
        drcardExpire: _this.drcard.drcardExpire,
        //颁发时间
        drcardIssueDate: _this.drcard.drcardIssueDate,
        //驾驶证正面:云地址
        drcardFront: _this.drcard.drcardFront,
        //驾驶证背面:云地址
        drcardBack: _this.drcard.drcardBack,
        //手持驾驶证:云地址
        drcardHolding: _this.drcard.drcardHolding,
//-----------------联系人---------
        //手机号
        phone: _this.contact.phone,
        //电子邮件
        email: _this.contact.email,
        //收信地址
        mailAddress: _this.contact.mailAddress,
        //联系人
        contactName: _this.contact.contactName,
        //联系电话
        contactPhone: _this.contact.contactPhone,
        //司机id
        driverId:_this.id,
      }
			_this.post("/driver/manager/driverAuthMaterial",param,res=>{
        console.log(res)
      })
		},
		//输入联系人信息
		enterContent(title,field){
			let _this = this;
			uni.showModal({
				title:"请输入 "+title,
				editable:true,
				content:_this.contact[field],
				success(res) {
          if (res.confirm) {
            _this.contact[field] = res.content;
          }
				}
			})
		},
		//手持身份证拍照
		takePhoto(type){
			//跳转拍照页面
			uni.navigateTo({
				url:"../identity_camera/identity_camera?type="+type
			})
		},
		//拍照页面图片回传
		uploadPhoto(type,photoPath){
			let _this = this;
      if(type == 'idcardHolding'){
        // _this.cardBackground2 = photoPath;
        _this.cardBackground2 = "../static/filling/1.jpg";
        _this.uploadFile(_this.cardBackground2,"idcardHolding")
      }
      if(type == 'drcardBack'){
        _this.cardBackground4 = photoPath;
        _this.uploadFile(photoPath,"drcardBack")
      }
      if(type == 'drcarkHolding'){
        _this.cardBackground5 = photoPath;
        _this.uploadFile(photoPath,"drcarkHolding")
      }
		},
		//驾驶证正面
		scanDrcardFront(res){
			let _this = this;
			let result = res.detail;
      console.log(result)
      //颁发时间
      _this.drcard.issueDate = result.issue_date.text;
      //驾驶证类型
      _this.drcard.carClass = result.car_class.text;
      //有效时间
      _this.drcard.validFrom = result.valid_from.text;
      _this.drcard.drcardExpire = result.valid_to.text;
      _this.drcard.drcardIssueDate = result.valid_from.text;
      _this.drcard.validTo = result.valid_to.text;

      //驾驶证正面：回显用
      _this.cardBackground3 = result.image_path;
      _this.uploadFile(res.detail.image_path,"drcardFront")
		},
		//身份证背面识别
		scanIdcardBack(res){
			let _this = this;
			let result = res.detail;
      _this.cardBackground1 = res.detail.image_path
      _this.idcard.idcardExpire = res.detail.valid_date.text;
      _this.uploadFile(res.detail.image_path,"idcardBack")
		},
		//身份证识别回调
		scanIdcardFront(res){
			let _this = this;
      _this.cardBackground0 = res.detail.image_path
      _this.idcard.name = res.detail.name.text
      _this.idcard.sex  = res.detail.gender.text
      _this.idcard.birthday = res.detail.birth.text
      _this.idcard.idNumber = res.detail.id.text
      _this.idcard.idcardAddress = res.detail.address.text
      _this.uploadFile(res.detail.image_path,"idcardFront")
		},
		//文件上传
		uploadFile(imagePath,type){
			let _this = this;
      _this.upload("/common/common/cos/upload",imagePath,{},(res)=>{
        if(res.success){
          if(type == "idcardFront"){
            _this.idcard.idcardFront = res.data;
          }
          if(type == "idcardBack"){
            _this.idcard.idcardBack = res.data;
          }
          if(type == "idcardHolding"){
            _this.idcard.idcardHolding = res.data;
          }
          if(type == "drcardFront"){
            _this.drcard.drcardFront = res.data;
          }
          if(type == "drcardBack"){
            _this.drcard.drcardBack = res.data;
          }
          if(type == "drcardHolding"){
            _this.drcard.drcardHolding = res.data;
          }

          console.log(_this.drcard)
          console.log(_this.idcard)
        }else{
          uni.showToast({
            icon:'error',
            title:message
          })
        }
      })
		},
		//加载司机的实名信息
		loadDriverAuthMaterial(){
			let _this = this;
		}
	},
	//获取上个页面传入的参数
	onLoad: function(options) {
    let login =  uni.getStorageSync("login");
    if(!login){
      uni.navigateTo({
        url:"../pages/login/login"
      })
    }
    this.id = login.id;
	},
	onShow() {
		let _this = this;
		_this.loadDriverAuthMaterial();
	}
};
</script>

<style lang="less">
@import url('filling.less');
</style>
